<!DOCTYPE html>

<!--
Copyright 2018 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autofill Assistant Test</title>

    <script>
      var removeButton = function() {
        var button = document.getElementById("button");
        button.parentNode.removeChild(button);
      }

      var removeTouchArea = function(event) {
        var touch_area = event.target;
        touch_area.parentNode.removeChild(touch_area);
      }

      var moveTouchAreaTwoAndThree = function() {
        var touch_area_two = document.getElementById("touch_area_two");
        setTimeout(function(){touch_area_two.style.left = "100px";}, 100);
        setTimeout(function(){touch_area_two.style.left = "200px";}, 200);
        setTimeout(function(){touch_area_two.style.left = "300px";}, 300);
        setTimeout(function(){touch_area_two.style.left = "100px";}, 400);
        setTimeout(function(){touch_area_two.style.left = "200px";}, 500);
        setTimeout(function(){touch_area_two.style.left = "300px";}, 600);

        var touch_area_three = document.getElementById("touch_area_three");
        setTimeout(function(){touch_area_three.style.top += "100px";}, 100);
        setTimeout(function(){touch_area_three.style.top += "200px";}, 200);
        setTimeout(function(){touch_area_three.style.top += "300px";}, 300);
        setTimeout(function(){touch_area_three.style.top += "400px";}, 400);
        setTimeout(function(){touch_area_three.style.top += "500px";}, 500);
        setTimeout(function(){touch_area_three.style.top += "600px";}, 600);
      }

      var incrementCounter = function(element) {
        element.value = parseInt(element.value) + 1;
      }

      var randomizePosition = function(element) {
        with(element.style) {
            // Multiplying by 2 will sometimes move elements out of view,
            // forcing the browser to scroll to them first.
            left = 2 * Math.floor(Math.random() * window.innerWidth) +'px';
            top = 2 * Math.floor(Math.random() * window.innerHeight) + 'px';
        }
      }

      var flipPosition = function(element, point_a, point_b) {
        // Flip between the specified positions.
        with(element.style) {
          if (left == point_a.left && top == point_a.top) {
            left = point_b.left;
            top = point_b.top;
          } else {
            left = point_a.left;
            top = point_a.top;
          }
        }
      }

      var onChangeIncrement = function(event) {
        event.target.value = parseInt(event.target.value) + 1;
      }

    </script>

    <style>
      #full_height_section {
        height: 100vh;
      }

      #touch_area_two {
        position: absolute;
      }

      #touch_area_three {
        position: absolute;
      }

      #terms-and-conditions {
        left: -9999px;
        position: absolute;
        z-index: -1;
      }

      #terms-and-conditions::before {
        content: 'before';
      }

      #with_inner_text span::before {
        content: 'before';
      }

      #button::before {
        content: 'before';
        display: none;
      }

      label[for='terms-and-conditions'] {
        display: inline-block;
        font-weight: normal;
        min-height: 48px;
        padding-inline-start: 48px;
        position: relative;
      }

      label[for='terms-and-conditions']::before {
        border: 1px solid #acacac;
        content: '';
        height: 32px;
        left: 0;
        line-height: 32px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 32px;
        z-index: 0;
      }

      #terms-and-conditions:checked + label[for='terms-and-conditions']::before {
        content: '\2714';
      }

      #random_moving_button {
        left: 200px;
        position: absolute;
        top: 200px;
      }

      #moving_button {
        left: 400px;
        position: absolute;
        top: 400px;
      }

      #overlay {
        background-color: rgb(255, 0, 0);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        visibility: hidden;
        z-index: 9999;
      }

      #input1_container {
        position: relative;
      }

      #input1_container > label {
        background-color: yellow;
        bottom: 0;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
      }

      #input1_container input:focus + label {
        margin-top: 0;
        top: 100%;
      }
    </style>
  </head>

  <body onload="moveTouchAreaTwoAndThree()">
    <input type="text" id="trigger-keyboard" />

    <!-- Touch areas can be accessed without needing scroll. -->
    <div>
      <p id="touch_area_one" ontouchend="removeTouchArea(event)" onmouseup="removeTouchArea(event)">
        Touchable Area One</p>
      <br>
    </div>
    <br> <!-- safety padding, do not remove: crbug/1140957 -->
    <div>
      <p id="touch_area_four" ontouchend="removeTouchArea(event)">
        Touchable Area Four</p>
      <br>
    </div>

    <!--
    Intentionally make this section has the full height of the window
    to force scroll when operating on the elements below not in this
    section.
    -->
    <div id="full_height_section">
      <p>Blank Section</p>
    </div>

    <!-- Touch areas get moved in intervals. -->
    <div>
      <p id="touch_area_two" ontouchend="removeTouchArea(event)">
        Touchable Area Two</p>
      <br>
    </div>
    <div>
      <p id="touch_area_three" ontouchend="removeTouchArea(event)">
        Touchable Area Three</p>
      <br>
    </div>

    <!-- Touch areas can only be accessed after scrolling. -->
    <div>
      <p id="touch_area_five" ontouchend="removeTouchArea(event)">
        Touchable Area Five</p>
      <br>
    </div>
    <br> <!-- safety padding, do not remove: crbug/1140957 -->
    <div>
      <p id="touch_area_six" ontouchend="removeTouchArea(event)" onclick="removeTouchArea(event)">
        Touchable Area Six</p>
      <br>
    </div>

    <div>
      <button id="button" type="button" onclick=
          "removeButton()"><span>Test Button</span></button>
      <br>
    </div>

    <div id="emptydiv" style="width: 100%; height: 0px; padding: 0px; margin: 0px;">
      This text is hidden, but might be revealed if the div's height is increased.
    </div>

    <div>
      <select id="select">
        <option value="one">One</option>
        <option value="two">Zürich Hauptbahnhof</option>
        <option value="three">Three</option>
        <option value="Aü万𠜎">Character Test Entry</option>
        <option value="four">Four</option>
        <option value="five" disabled>Five</option>
      </select>
    </div>

    <div id="input1_container">
      <label class="pairs" for="input1"><b>Input1</b></label>
      <input class="pairs" id="input1" type="text" value="helloworld1" />
    </div>
    <div>
      <label class="pairs" for="input2">Input2</label>
      <input class="pairs" id="input2" type="text" value="helloworld2" />
    </div>
    <div>
      <label class="pairs" for="input3">Input3</label>
      <input class="pairs" id="input3" type="text" value="helloworld3" />
    </div>
    <div>
      <label class="pairs" for="input4">Input4</label>
      <input class="pairs" id="input4" type="text" value="helloworld4" />
    </div>
    <div>
      <label class="pairs" for="input5">Input5</label>
      <input class="pairs" id="input5" type="text" value="helloworld5" />
    </div>
    <div>
      <input id="uppercase_input" type="text" value="HELLOWORLD6" />
    </div>
    <div>
      <input id="input6" type="text" value="" />
    </div>
    <div>
      <input id="input7" type="text" value="" />
    </div>
    <div>
      <input id="input_with_onchange" type="text" value="0" onchange="onChangeIncrement(event)" />
    </div>
    <div>
      <input id="input_password" type="password" />
    </div>

    <div>
      <input id="input_js_event_listener" type="text">
      <!-- Uses the 'key' property of a keydown event. -->
      <script>
        var t = document.getElementById("input_js_event_listener");
        t.addEventListener('keydown', e => {
          var value = e.target.value;
          e.preventDefault();
          e.target.value = value + e.key;
        });
      </script>
    </div>

    <div>
      <input id="input_js_event_with_timeout" type="text">
      <!-- Uses the 'key' property of a keydown event. -->
      <script>
        var t = document.getElementById("input_js_event_with_timeout");
        t.addEventListener('keydown', e => {
        var value = e.target.value;
        if (value.length === 3) {
          e.preventDefault();
          setTimeout(() => {e.target.value = value + ' ' + e.key}, 10);
        }
      });
      </script>
    </div>

    <div id="testOuterHtml"><span>Span</span><p>Paragraph</p></div>

    <div id="hidden" style="display: none;">This text is hidden</div>

    <div id="scroll-me" style="background-color: green; height: 40px; width: 100%;"></div>

    <iframe id="iframe" name="test_iframe" width="100%" height="500" src=
        "autofill_assistant_target_website_iframe_one.html"></iframe>

    <iframe id="iframeExternal" name="test_iframe_external" width="100%" height="500" src=
        "http://localhost:8081/autofill_assistant_external_iframe.html"></iframe>

    <input type="checkbox" id="terms-and-conditions" />
    <label for="terms-and-conditions" >
      <a href="#">I have read and understood <br />the terms and conditions</a>
    </label>

    <label id="option1_label" for="option1">Option <b>1</b></label>
    <input type="checkbox" id="option1">
    <label id="option2_label">
      Option <b>2</b>
      <input id="option2" type="checkbox" name="option2">
    </label>
    <label id="bad_label1" for="doesnotexist">A label without an element</label>
    <label id="bad_label2">Another label without an element</label>

    <script>
      let upperCaseInput = document.querySelector("#uppercase_input");
      document.addEventListener('keyup', () => {
        upperCaseInput.value = upperCaseInput.value.toUpperCase();
      });
    </script>

    <div id="with_inner_text">
      <span>hello</span>
      <span>hello, world</span>
      <span style="display: none">world</span>
    </div>

    <p># Clicks (random moving): <input id="random_moving_click_counter" type="field" value="0" readonly/> </p>
    <div>
      <button id="random_moving_button" type="button" onclick=
          "incrementCounter(document.getElementById('random_moving_click_counter')); randomizePosition(this);">Random Moving Button</button>
      <br>
    </div>

    <p># Clicks (static): <input id="static_click_counter" type="field" value="0" readonly/> </p>
    <div>
      <button id="static_button" type="button" onclick=
          "incrementCounter(document.getElementById('static_click_counter'));">Static Button</button>
      <br>
    </div>

    <p># Clicks (moving): <input id="moving_click_counter" type="field" value="0" readonly/> </p>
    <div>
      <button id="moving_button" type="button" onclick=
          "incrementCounter(document.getElementById('moving_click_counter'));
           var point_a = new Object(), point_b = new Object();
           point_a.left = '400px';
           point_a.top = '400px';
           point_b.left = window.innerWidth+'px';
           point_b.top = window.innerHeight+'px';
           flipPosition(this, point_b, point_a);">Moving Button</button>
      <br>
    </div>

    <div id="before_scroll_container"/>
    <div id="scroll_container" style="width:100px;height:100px;overflow:auto;">
      <div id="scroll_item_1" style="width:50px;height:50px">1</div>
      <div id="scroll_item_2" style="width:50px;height:50px">2</div>
      <!-- elements below this point cannot be seen except by scrolling
           within the container. -->
      <div id="scroll_item_3" style="width:50px;height:50px">3</div>
      <div id="scroll_item_4" style="width:50px;height:50px">4</div>
      <div id="scroll_item_5" style="width:50px;height:50px">5</div>
    </div>
    <div id="after_scroll_container"/>

    <div>Section with text only</div>
    <div>Section with text and <button onclick="removeButton()">some button</button></div>

    <table class="proximity">
      <tr><td>One</td><td>Two</td><td>Three</td></tr>
      <tr><td>Four</td><td><span id="at_center">Center</span></td><td>Five</td></tr>
      <tr><td>Six</td><td>Seven</td><td>Eight</td></tr>
    </table>

    <a id="form_target_website_link" href="form_target_website.html">Link to FormTargetWebsite</a>
    <div id="form_target_navigation_action" onclick="window.location.href='form_target_website.html'">Navigate to FormTargetWebsite</div>

    <div id="overlay">
      This is an overlay that covers the whole page.
    </div>

    <div class="nth_match_parent">
      <span class="nth_match_child"></span>
    </div>

    <div class="nth_match_parent">
      <p class="nth_match_child"></p>
      <ul class="nth_match_child">
        <li class="nth_match_child"></li>
      </ul>
      <strong class="nth_match_child"></strong>
    </div>

    <div class="label">Label 1</div>
    <div class="label">Label 2</div>
    <div class="label">Label 3</div>

    <div>
      <input id="duplexweb" type="text" value="empty"></input>
      <script>
        var onDuplexwebEvent = function(event) {
          document.querySelector('#duplexweb').value = 'received';
        }
        document.addEventListener('duplexweb', onDuplexwebEvent);
      </script>
    </div>

  </body>
</html>
